<template>
  <view>
     <view >
     	<view >
			<!-- 头部区域 -->
			<view class="headersearch">
				<!-- <uni-search-bar  @confirm="search" :focus="isserachfocus" v-model="searchinput" @blur="blur" @focus="focus"  @cancel="cancel" @clear="clear"  @headerheight="headerheight"></uni-search-bar> -->
			</view>

     	</view>
		<view >
			<view class="page-body">
						<view class="page-section page-section-gap">
							<!-- #ifdef H5 -->
							<map style="width: 100%; height: 450px;" :latitude="locationwhere.latitude" :longitude="locationwhere.longitude" :markers="covers" @tap="getmaplocation">
							</map>
							<!-- #endif -->
							<!-- #ifdef APP -->
								<view class="mapcontent">
									<view class="maptitle">
										
									</view>
									<view class="mapdetail">
										
									</view>
									<view class="">
										<image class="mapcontentimg" src="@/static/img/1706008879317.jpg" mode="aspectFill"></image>
									</view>
								</view>
							<!-- #endif -->
						</view>
					</view>
		</view>
		<view class="">
			<uni-popup ref="popup" :mask-click="true" >
				<view class="allpopup" v-if="1">
					<view class="popupfirst">
						<view class="title">
							好友申请
						</view>
						<view class="titleright">
							<view class="addbutton" @tap="tapisserachfocus">
								<uni-icons type="plusempty" size="16" color="#f8fbfe"></uni-icons>
								<view style="margin-right: 10rpx;">
									new加朋友
								</view>
							</view>
							<view class="closepop"  @tap="cancel">
								<uni-icons type="tune-filled" size="24" color="#282c35"></uni-icons>
							</view>
							
						</view>
					</view>
					<scroll-view scroll-x="true" >
						<view class="centerrequest">
							
							<view  v-for="(item,index) in 6">
								<view class="centerrequestitem">
									<view v-if="index <requestfriend.length" :class=" 'centerrequestdetail'" @tap="dialogToggle(requestfriend[index])">
										新朋友!
										<view class="">
											<image class="fimg" :src="baseurl+requestfriend[index].imgUrl" mode=""></image>
										</view>
									</view>
								</view>
								<view class="centerrequestbottom" v-if="index <requestfriend.length">
									{{requestfriend[index].nickname}}
								</view>
							</view>
						</view>
					</scroll-view>
					
					<view class="list1bot" >
						<view class="list1botcontent" @tap="clicknewfriend">
							<view class="leftimgicon">
								<image class="img" src="../../static/tabBar/search/flag.jpg" mode=""></image>
							</view>
							<view class="rightimgtitle">
								<view class="title">
									点击加好友
								</view>
								<view class="detail">
									让你的世界热闹起来
								</view>
							</view>
						</view>
						<view class="maybifriend">
							可能认识的人
						</view>
						<view style="color: black;font-weight: 600;font-size: 38rpx;padding: 25rpx">
							通讯朋友
						</view>
						
						<view class="">
							<scroll-view scroll-y="true" class="scrollviewheight">
								<view>
									<view class="friendlist" v-for="(item,index) in updatedFriendlist" :key="item.id">
										<view @tap="gofrienddetailpage(item.id,item.isstatic)">
											<image class="pic" :src="baseurl+item.imgUrl" mode=""></image>
										</view>
										<view class="centercon" >
											<view class="username" v-html="highlightText(item.nickname)">
												
											</view>
											<view class="telemail" v-html="highlightText(item.userName)">
												
											</view>
										</view>
										<view class="right">
											<button v-if="item.isstatic == 0" size="mini" @tap="gofriendmsgpage(item)" class="isstatic0">发消息</button>
											<!-- 我是申请者 -->
											<button v-else-if="item.isstatic == 2" size="mini" @tap="gofrienddetailpage(item.id,item.isstatic)" class="isstatic2" disabled>申请中</button>
											<button v-else-if="item.isstatic == 3 && userInfo.id != item.id"  size="mini" round @tap="gofrienddetailpage(item.id,item.isstatic)" class="isstatic3">加好友</button>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
				<view class="noone" v-show="Friendlist.length == 0">
					<view class="">
						<view class="nooneimg">
							<image src="../../static/tabBar/search/noone.webp" mode="widthFix"></image>
						</view>
						<view class="noonetext">
							什么也没有
						</view>
					</view>
				</view>
				<view :style="{'margin-bottom': this.tabaheight + 'px'}">
					
				</view>
			</uni-popup>
		</view>
		<!-- 弹出窗： -->
		<uni-popup ref="alertDialog" type="dialog" >
			<uni-popup-dialog :type="'success'" cancelText="关闭" confirmText="同意" title="通知" :content="msgtext" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="alertDialogmap" type="dialog">
			<uni-popup-dialog :type="'success'" cancelText="关闭" confirmText="同意" title="通知" :content="msgtext" @confirm="dialogConfirmmap" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="'success'" :message="messageText" :duration="2000" :tabaheight="tabaheight"></uni-popup-message>
		</uni-popup>
     </view>
	 <view>
		 
	 	<tarbar id="tabaheightclass" currentPage="list1"></tarbar>
	 </view>
  </view>
</template>

<script>
import tarbar from '@/common/tabbar.vue'
import $http from '../../common/api/request.js'
import headervue from '../../components/header/index.vue'
import {mapState} from 'vuex'
export default {
  data() {
    return {
	  searchinput:"",
	  //用于存放数据库中的用户数据列表:
	  Friendlist:[],
	  tabaheight:0,
	  baseurl:"https://zyc618.mynatapp.cc",
	  locationwhere:{},
	  idArray:[],//朋友列表
	  id1state:[],//接收方
	  id2state:[],//申请方
	  requestfriend:[],
	  msgtext:"",//弹出框提示内容
	  messageText:"",//弹出框结果提示
	  needdialogConfirm:"",//申请友人id
	  getnavbarheightdata:0,
	  isserachfocus:false,//搜索框的焦点
	  covers: [{
			latitude: 39.909,
			longitude: 116.39742,
			iconPath: '@/static/tabBar/delete.png'
		}]
    }
  },
  methods: {
	  headerheight(heig){
	  	this.getnavbarheightdata = heig;
		console.log(heig);
	  	
	  },
	tapisserachfocus(){
		this.isserachfocus = true;
		console.log(111);
	},
	// 头部搜索框 获得焦点
	focus(){
		this.open()
	},
	//头部搜索框 失去焦点
	blur(){
		console.log("blur");
	},
	//内容清除
	clear(){
		console.log("clear");
	},
	cancel(){
		
		this.close()
	},
	//弹窗回调:
	//打开:
	dialogToggle(item) {
		this.msgtext = "同意用户账号:"+item.userName+item.nickname+"好友请求"
		this.needdialogConfirm = item.id;
		this.$refs.alertDialog.open();
	},
	//关闭:
	dialogClose(){
		this.messageText = `已取消`;
		this.$refs.message.open()
	},
	dialogConfirm() {
		this.changefriend(this.needdialogConfirm);
	},
	//点击关闭小图标
	closepop(){
		this.close();
	},
	//实时搜索:
    searchuserlist(){
		$http.request({
			url: "/search/user",
			method: "POST",
			data: {
				searchinput:this.searchinput
			}
		}).then((res) => {
			this.Friendlist = res;
		}).catch((err) => {
			console.log(err);
		})
	},
	//获取朋友数据://获取自己申请中的数据和别人请求加为好友的数据:
	getfriend(){
		$http.request({
			url: "/search/getallrequestfriendmsg",
			method: "POST",
			data: {
				UserID:this.userInfo.id
			}
		}).then((res) => {
			if(res.code ==200){
				this.idArray = res.data.arr0;
				this.id1state = res.data.arr1;
				this.id2state = res.data.arr2;
			}
			
		}).catch((err) => {
			console.log(err);
		})
	},
	//发起修改朋友状态:
	changefriend(index){
		$http.request({
			url:"/search/changerelacion",
			method:"post",
			data:{
				UserID:this.userInfo.id,
				friendID:index
			}
		}).then((res)=>{
			if(res.code===200){
				this.messageText = `添加成功`;
				this.$refs.message.open()
			}
		}).catch((err)=>{
			
		})
	},
	//前往详情页面:
	gofrienddetailpage(index,state){
		  this.navigateTo({
		  	url:`/pages/gofrienddetailpage/gofrienddetailpage?friendID=${index}&state=${state}`
		  })
	  },
	
	//前往聊天页面:
	gofriendmsgpage(item){
		this.$nextTick(()=>{
			this.navigateTo({
				url:`/pages/messagespage/messagespage?friendNickname=${item.nickname}&friendID=${item.id}&pathavatar=${item.imgUrl}`
			})
		})
	},
	//文字高亮处理:
	highlightText(text) {
	    const query = this.searchinput.toLowerCase();
	    const regExp = new RegExp(query, 'ig');
	    return text.replace(regExp, match => `<span style="color: green;font-weight:600">${match}</span>`);
	  },

	  //打开底部阴影框
	open() {
		this.$refs.popup.open('bottom')
	},
	clicknewfriend(){
		this.messageText = `让你的旅程热闹起来,快去试试吧`;
		this.$refs.message.open()
	},
	//关闭底部阴影框
	close() {
		this.$refs.popup.close()
	},
	//获取高度:
	gettabaheight(){
	  const query = uni.createSelectorQuery().in(this);
		  query
			.select("#tabaheightclass")
			.boundingClientRect((data) => {
				this.tabaheight = data.height
				
			})
			.exec();
	},
	//获取地址信息:
	getmaplocation(){
		this.msgtext = "是否同意获取地址请求"
		this.$refs.alertDialogmap.open();
		
	},
	//确定按钮,打开地址回调:
	dialogConfirmmap(){
		uni.openLocation({
			latitude: this.locationwhere.latitude,
			longitude: this.locationwhere.longitude,
			success: function () {
				console.log('success');
			}
		});
	},
	getwhereyouare(){
		uni.chooseLocation({
			success: function (res) {
				console.log('位置名称：' + res.name);
				console.log('详细地址：' + res.address);
				console.log('纬度：' + res.latitude);
				console.log('经度：' + res.longitude);
				this.locationwhere = res;
			}
		});
	}
  },
  components:{
	  tarbar,headervue
  },
  watch:{
	  searchinput:{
		  deep:true,
		  handler(){
			  this.searchuserlist()
		  }
	  }
  },
  mounted() {
  	this.gettabaheight();
	this.getmaplocation();
  },
  onReady() {
  	this.getfriend();
  },
  computed:{
	  ...mapState({
	  	userInfo: state => state.user.userInfo
	  }),
	   updatedFriendlist() {
		   this.requestfriend=[];
	        return this.Friendlist.map((friend) => {
	          if (this.idArray.includes(friend.id)) {
	            // 使用Vue.set确保对象属性的响应性
	            return { ...friend, isstatic: 0 };
	          }else if(this.id1state.includes(friend.id)){
				  this.requestfriend.push({ ...friend, isstatic: 1 })
			  }else if(this.id2state.includes(friend.id)){
				  return { ...friend, isstatic: 2 };
			  }
	          return { ...friend, isstatic:3 };
	        });
	      },
  }
};
</script>
<style lang="scss" scoped>
	.headersearch{
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		background-color: #fff;
	}
	.scrollviewheight{
		height: 430rpx;
	}
	
	.friendlist{
		display: flex;
		padding-left:20rpx ;
		width: 100%;
		.pic{
			width:80rpx;
			height: 80rpx;
			border-radius: $uni-border-radius-base;
		}
		.centercon{
			width: 60%;
			padding-left:20rpx;
			.username{
				font-size: $uni-font-size-lg;
				line-height: 50rpx;
			}
			.telemail{
				color: $uni-text-color-placeholder;
				font-size: $uni-font-size-sm;
			}
		}
		.right{
			display: flex;
			align-items: center;
			
			.isstatic0{
				background-color: #fbbe0c;
				color: #fff;
			}
			.isstatic2{
				background-color: #e53e30;
				color: #fff;
			}
			.isstatic3{
				background-color: #3589fa ;
				color: #fff;
			}
		}
	}
	.list1bot{
		margin-top: 80rpx;
		.maybifriend{
			color: #a5a5a5;
			font-size: $uni-font-size-base;
			font-weight: 600;
		}
		.list1botcontent{
			display: flex;
			align-content: center;
			justify-content: space-around;
			padding:0 10rpx 5rpx;
			.leftimgicon{
				.img{
					width: 120rpx;
					height: 120rpx;
				}
			}
			.rightimgtitle{
				.title{
					color: #4c94ec;
					font-weight: 800;
					font-size: $uni-font-size-lg;
					margin-right: 10rpx;
				}
				.detail{
					font-size: $uni-font-size-sm;
					color: #a5a5a5;
				}
			}
		}
	}
	
	.noone{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80vh;
		.nooneimg{
			
		}
		.noonetext{
			line-height: 36rpx;
			text-align: center;
			color:#fff
		}
	}
	.allpopup{
		background-color: #fff;
		.popupfirst{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 30rpx;
			.title{
				color:#3589fa;
				font-weight: 800;
				
			}
			.titleright{
				display: flex;
				.addbutton{
					display: flex;
					justify-content: space-between;
					align-items: center;
					background-color: #3589fa;
					color: #fff;
					padding: 10rpx 15rpx;
					border-radius: 40rpx;
					margin-left: 10rpx;
				}
				.closepop{
					padding: 0rpx 10rpx;
					display: flex;
					align-items: center;
					background-color: #f1f1f1;
					border-radius: 10rpx;
				}
			}
		}
	}
	.centerrequest{
		display: flex;
		flex: 1;
		align-items: center;
		.centerrequestitem{
			width: 150rpx;
			height: 150rpx;
			border: 3rpx dashed #939393;
			border-radius: 50%;
			overflow: hidden;
			color: $uni-color-paragraph;
			.centerrequestdetail{
				background-color: #fb4f4b;
				width: 100%;
				height: 100%;
				border-radius: 50%;
				color: #fff;
				font-size: $uni-font-size-sm;
				text-align: center;
				border: 3rpx solid #fb4f4b;
			}
			.fimg{
				width: 80%;
				height: 120rpx;
			}
		}
		.centerrequestbottom{
			color: $uni-color-paragraph;
			font-size: $uni-font-size-base;
			text-align: center;
		}
	}
	
</style>
